<template>
  <div class="material">
    <el-dialog class="material-body" title="请选择您想要的素材"  top="1vh" center :visible.sync="isshowing" width="70%">
      <el-card shadow="hover" class="search-body">
        <el-row :gutter="10">
          <el-col class="input-item" :span="4">
            <el-input v-model="search" placeholder="名称查询"></el-input>
          </el-col>
          <el-col :span="10" class="button-item">
            <el-button @click="dosearch" style="margin-left:20px" size="small" type="primary">搜索</el-button>
            <el-button @click="resetsearch" style="margin-left:20px" size="small">重置</el-button>
          </el-col>
        </el-row>
      </el-card>

      <div class="card image-item" v-loading="loading">
        <el-row :gutter="10">
          <el-col :span="4" v-for="item in imageList" :key="item.id">
            <a class="test" href="#">
              <div class="image-item-body">
                <el-card class="card-card" shadow="hover">
                  <!-- 批量管理的checkBox -->
                  <div>
                    <img
                      @click="largeImage(item)"
                      title="点击预览图片"
                      class="image"
                      :src="`${host}/${item.dir}/${item.fileName}`"
                    />
                  </div>
                  <p class="background:red">name:{{item.title?item.title:'未命名'}}</p>
                </el-card>
                <el-button type="primary" @click="handleInsert(item)" size="mini" class="button">插 入</el-button>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.currentPage"
        :page-sizes="[12, 24, 36, 48]"
        :page-size="pager.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.total"
      ></el-pagination>
    </el-dialog>

    <!-- 预览的弹窗 -->
    <el-dialog class="enlargeImg" :visible.sync="enlargeShow" width="70%" top="5vh">
      <h3 class="title">name:{{enlargeImg.title?'':'未命名'}}</h3>
      <el-button type="primary" @click="handleInsert(inputData)" class="button">插 入 到 文 章</el-button>
      <div class="image-body">
        <img :src="`${host}/${enlargeImg.dir}/${enlargeImg.fileName}`" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入的粘贴方法
import setting from "@/settings";
import material from "@/api/materialManager/material";
export default {
  data() {
    return {
      // 搜索所要的数据
      search: "",
      //用于放大图片后，用这个数据去接收想要的数据
      inputData: "",
      //放大图片所需要的数据
      enlargeImg: {},
      enlargeShow: false,
      //基本网址
      host: setting.host,
      isshowing: false,
      // 素材列表
      imageList: [],
      // 加载
      loading: false,
      //  分页器
      pager: {
        start: 1,
        limit: 12,
        total: 100,
        currentPage: 1
      }
    };
  },
  watch:{
    isshowing(){
      this.getImageList()
    }
  },
  methods: {
    // 搜索方法
    dosearch() {
      this.getImageList();
    },
    //重置搜索框
    resetsearch() {
      // 所有数据为空的时候不执行重置方法
      if (this.search) {
        this.pager = this.$options.data().pager;
        this.search = "";
        this.getImageList();
      }
    },
    //手动将选择的素材添加到某处
    handleInsert(item) {
      // 它在拿到的item里塞入一个coerImgFlag属性。
      // 用于初始化父级组件的coerImgFlag属性
      item.coerImgFlag=false,
      // 将这个item返回给父级组件，再由父级组件去插入到富文本中
      this.$emit("insertImage", item);
      this.$message({
        message: "插入成功",
        type: "success"
      });
    },
    // 放大图片的弹窗
    largeImage(item) {
      this.inputData = item;
      this.enlargeShow = true;
      this.enlargeImg = item;
    },
    // 分页器方法
    handleSizeChange(val) {
      this.pager.limit = val;
      this.pager.start = 1;
      this.pager.currentPage = 1;
      this.getImageList();
    },
    handleCurrentChange(val) {
      this.pager.start = val;
      this.getImageList();
    },
    // 拿数据,图片方法
    getImageList() {
      this.loading = true;
      material
        .imageList({
          start: this.pager.start,
          limit: this.pager.limit,
          title: this.search
        })
        .then(res => {
          this.imageList = res.data.data.list;
          this.pager.total = res.data.data.totalRow;
          this.loading = false;
        })
        .catch(res => {
          this.loading = false;
          this.$message({
            message: `网络有误，请刷新稍后重试，或者试着甩锅给后台`,
            type: "warning"
          });
        });
    }
  },
  created() {
    this.getImageList();
  }
};
</script>

<style lang="scss" scoped>
.material-body {
  .image-item {
    .card-card {
      cursor: pointer;
      margin: 10px 0 10px 0;
      .image {
        width: 100px;
        height: 100px;
      }
    }
    .button {
      display: block;
      margin: 0 auto;
    }
  }
}
.enlargeImg {
  overflow: hidden;
  .image-body {
    max-height: 400px;
    overflow: auto;
  }
  img {
    width: 100%;
  }
  button {
    display: block;
    margin: 20px auto;
  }
}
.title {
  text-align: center;
}
a .button {
  display: none !important;
}
a:hover {
  .button {
    display: block !important;
  }
  display: block;
}
.image-item-body {
  height: 240px;
}
</style>